<template>
  <div class="data-list">
    <el-table 
      :data="records" 
      v-loading="listLoading" 
      :row-key="idKey" 
      stripe
      border
      highlight-current-row 
      style="width: 100%">
      <slot name="row"></slot>
    </el-table>
    <div 
      style="padding-top:20px; text-align: center;" 
      v-if="pageable"
      v-show="!listLoading">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="parameter.currPage"
        :page-size.sync="parameter.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.recordsTotal"/>
    </div>
    <el-dialog
      :title="isEdit ? updateTitle : createTitle"
      :visible.sync="dialogVisible"
      :width="editFormWidth"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false">
      <template v-if="dialogVisible">
        <slot name="edit-form" :isEdit="isEdit" :editDataId="editData && editData[idKey]" :editData="editData"></slot>
      </template>
    </el-dialog>
  </div>
</template>

<script>

export default {
  components: {
  },
  props: {
    loadFunc: { type: Function, required: true },
    deleteFunc: { type: Function, required: true },
    parameter: { default: null },
    autoLoad: { type: Boolean, default: true },
    idKey: { type: String, default: 'id' },
    editFormWidth: { type: String, default: '600px' },
    updateTitle: { type: String, default: '修改' },
    createTitle: { type: String, default: '新增' },
    pageable: { type: Boolean, default: false }
  },
  data() {
    return {
      pageData: {
        recordsTotal: 0,
        datas: []
      },
      records: [],
      listLoading: false,
      isEdit: false,
      editData: null,
      dialogVisible: false
    }
  },
  mounted: function() {
    this.autoLoad && this.query()
  },
  methods: {
    query() {
      if (this.pageable) {
        this.parameter.currPage = 1
      }
      this.loadData()
    },
    loadData() {
      if (this.listLoading) return
      this.listLoading = true

      var parameter = this.parameter
      if (this.pageable) {
         parameter = JSON.parse(JSON.stringify(this.parameter))
         parameter.currPage--
      }
      this.loadFunc(parameter).then(resp => {
        this.listLoading = false
        console.log(resp)
        if (resp.code === 1) {
          if (this.pageable) {
            this.pageData = resp.data
            this.records = resp.data.datas
          } else {
            this.records = resp.data
          }
        } else {
          this.$message({ message: resp.message, type: 'warning' })
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    handleSizeChange(size) {
      this.parameter.pageSize = size
      this.parameter.currPage = 1

      this.loadData()
    },
    handleCurrentChange(page) {
      this.parameter.currPage = page

      this.loadData()
    },
    toCreate() {
      this.isEdit = false
      this.editData = null
      this.dialogVisible = true
    },
    toEdit(item) {
      this.isEdit = true
      this.editData = item
      this.dialogVisible = true
    },
    toDelete(item, confirmMsg, deleteSuccessMsg) {
      confirmMsg = confirmMsg || `确认删除当前记录?`
      this.$confirm(confirmMsg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delete(item, deleteSuccessMsg)
      })
    },
    delete(item, deleteSuccessMsg) {
      deleteSuccessMsg = deleteSuccessMsg || '删除成功'
      this.deleteFunc(item[this.idKey]).then((resp) => {
        if (resp.code === 1) {
          this.$message({ message: deleteSuccessMsg, type: 'success' })
          this.loadData()
        } else {
          this.$message({ message: resp.message, type: 'warning' })
        }
      })
    },
    afterSave() {
      this.dialogVisible = false
      this.loadData()
    },
    afterCancel() {
      this.dialogVisible = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .data-list {
    /deep/ .el-button+.el-button {
      margin-left: 0px;
    }
  }
  
</style>
